<template>
  <div>
    <echatrs width="200px" height="140px" id="main" :option="option"></echatrs>
  </div>
</template>
<script>
import echatrs from "../common/echatrs.vue";
export default {
  components: {
    echatrs,
  },
  data() {
    return {
      option: {
        color: [
          "#37a2da",
          "#32c5e9",
          "#9fe6b8",
          "#ffdb5c",
          "#ff9f7f",
          "#fb7293",
        ],
        legend: {
        //   left: "center",
          top: "bottom",
          data: [
            "day1",
            "day2",
            "day3",
            "day4",
            "day5",
            "day6",
          ],
        },
        series: [
          {
            name: "Radius Mode",
            type: "pie",
            radius: [10, 30],
            center: ["42%", "20%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 1,
            },
            label: {
              show: false,
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            data: [
              { value: 13, name: "day1" },
              { value: 8, name: "day2" },
              { value: 22, name: "day3" },
              { value: 25, name: "day4" },
              { value: 15, name: "day5" },
              { value: 29, name: "day6" },
            ],
            label: {
              show: true,
              fontSize: 4,
              color: [
                "#37a2da",
                "#32c5e9",
                "#9fe6b8",
                "#ffdb5c",
                "#ff9f7f",
                "#fb7293",
              ],
            },
            emphasis: {
              label: {
                show: true,
              },
            },
          },
        ],
      },
    };
  },
};
</script>